<template>
    <div class="contractView">
        <el-card class="box-card">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="big">
                <el-form-item label="">
                    <el-input v-model="keyword" placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="请输入客户名称">{{ }}</el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="find">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="contract">
                <div class="addContract" @click="addContract">添加合同&nbsp;</div>
                <div class=""> | </div>
                <div class="addContract" @click="leadContract">&nbsp;导入合同</div>
            </div>

            <el-table :data="tableData" style="width: 100%" :row-style="{ height: '40px' }"
                :header-cell-style="{ backgroundColor: '#F0F2F5', lineHeight: '40px' }">
                <el-table-column fixed prop="number" label="合同编号" width="200">
                </el-table-column>
                <el-table-column prop="name" label="客户名称" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="手机号码" width="200">
                </el-table-column>
                <el-table-column prop="creatTime" label="创建时间" width="180">
                </el-table-column>
                <el-table-column prop="files" label="附件" width="180">
                    <!-- <el-upload ref="upload" action="action"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :show-file-list="false"
                        :http-request="handlehttpRequest" :on-change="onUploadChange">
                        <el-button size="small" type="primary" icon="el-icon-upload">导入Excel</el-button>
                    </el-upload> -->
                </el-table-column>
                <el-table-column prop="price" label="价格" width="160">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="font-size: 14px"
                            @click="conEditor(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" style="font-size: 14px" @click="fa">发货</el-button>
                        <el-button type="text" size="small" style="font-size: 14px"
                            @click="Cdetel(scope.row)">删除</el-button>
                        <el-button type="text" size="small" style="font-size: 14px" @click="waitTeam">排队</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 编辑合同弹窗 -->
        <el-dialog :visible.sync="dialogFormVisible" width="500px">
            <el-form label-width="100px" class="demo-ruleForm" style="height: 880px; width: 340px;" :model="questionForm"
                ref="questionForm" :rules="rules">
                <el-form-item label="选择客户" prop="name">
                    <el-input v-model="questionForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-select placeholder="请选择手机号码" v-model="questionForm.phone">
                        <el-option label="" value="123456789"></el-option>
                        <el-option label="" value="147258369"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传合同" prop="files">
                    <el-upload class="upload-demo" ref="upload" action="#" :on-preview="handlePreview"
                        :on-remove="handleRemove" :file-list="questionForm.files" :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                       
                    </el-upload>
                </el-form-item>
                <el-form-item label="意向车型" prop="thinkCar">
                    <el-input v-model="questionForm.thinkCar"></el-input>
                </el-form-item>
                <el-form-item label="颜色" prop="carColor">
                    <el-select placeholder="请选择活动区域" v-model="questionForm.color">
                        <el-option label="黑色" value="shanghai"></el-option>
                        <el-option label="白色" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="questionForm.price"></el-input>
                </el-form-item>
                <el-form-item label="收取定金" prop="dingMoney">
                    <el-switch v-model="questionForm.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="定金" prop="getMoney">
                    <el-input v-model="questionForm.getMoney"></el-input>
                </el-form-item>
                <el-form-item label="已收款" prop="getMoney">
                    <el-input v-model="questionForm.getMoney"></el-input>
                </el-form-item>
                <el-form-item label="待收款" prop="waitMonry">
                    <el-input v-model="questionForm.waitMonry"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editCreate">确定修改</el-button>
                    <el-button @click="waitTeamTwo">排队</el-button>
                    <el-button type="primary" @click="cancel">取消</el-button>
                    <el-button @click="faTwo">发货</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 添加合同表单弹窗 -->
        <el-dialog :visible.sync="FormVisible" width="500px">
            <el-form label-width="100px" class="demo-ruleForm" style="height: 880px; width: 340px;" :model="addForm"
                ref="addForm" :rules="rules">
                <el-form-item label="选择客户" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-select placeholder="请选择活动区域" v-model="addForm.phone">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传合同" prop="files">
                    <el-upload class="upload-demo" ref="upload" action="#" :on-preview="handlePreview"
                        :on-remove="handleRemove" :file-list="addForm.files" :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="意向车型" prop="thinkCar">
                    <el-input v-model="addForm.thinkCar"></el-input>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <el-select placeholder="请选择活动区域" v-model="addForm.color">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="addForm.price"></el-input>
                </el-form-item>
                <el-form-item label="收取定金" prop="dingMoney">
                    <el-switch v-model="addForm.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="定金" prop="getMoney">
                    <el-input v-model="addForm.getMoney"></el-input>
                </el-form-item>
                <el-form-item label="已收款" prop="getMoney">
                    <el-input v-model="addForm.getMoney"></el-input>
                </el-form-item>
                <el-form-item label="待收款" prop="waitMonry">
                    <el-input v-model="addForm.waitMonry"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="rightCreate">立即创建</el-button>
                    <el-button @click="waitTeamOne">排队</el-button>
                    <el-button type="primary" @click="createCancel">取消</el-button>
                    <el-button @click="faOne">发货</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { getOrderList, addOrderList, editOrderList, delOrderList } from '../../api/index'

export default {
    name: "contractView",
    data() {
        return {
            addForm: {
                file: null
            },
            currentPage: 1,
            pageSize: 5,//每页显示条数
            total: 0,
            keyword: '',
            tableData: [
            ],
            modalType: 0,
            tableDataAll: [],
            dialogFormVisible: false,
            FormVisible: false,
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            questionForm: {
                delivery: false,
            },
            addForm: {
                delivery: true,
            },
            formInline: {},
            rules: {
                name: [{ required: true, message: "请输入客户名", trigger: "blur" },],
                phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
                thinkCar: [{ required: true, message: "请选择意向车型", trigger: "blur" }],
                color: [{ required: true, message: "请选择颜色", trigger: "blur" }],
                price: [{ required: true, message: "请输入价格", trigger: "blur" }],
                // files: [{ required: true, message: '请选择文件', trigger: 'change' }],
                getMoney: [{ required: true, message: "不可空", trigger: "blur" }],
                waitMonry: [{ required: true, message: "请输入待收款", trigger: "blur" }],
            },
        }

    },
    created() {
        this.geyData()
    },
    methods: {
        addContract() {
            this.modalType = 0
            this.FormVisible = true
        },
        // 导入合同
        leadContract() {
            console.log(this.addForm);
        },
        handleRemove(file) {
            console.log(file);
        },
        // 添加合同弹窗功能
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        // 添加取消合同弹窗功能
        cancel() {
            this.dialogFormVisible = false
        },
        createCancel() {
            this.FormVisible = false
        },
        // 编辑弹窗功能
        conEditor(row) {
            this.modalType = 1
            this.dialogFormVisible = true
            this.questionForm = JSON.parse(JSON.stringify(row))
        },
        // 删除合同
        Cdetel(row) {
            this.modalType = 0
            this.addForm = JSON.parse(JSON.stringify(row))
            this.$confirm('确定要删除这条合同信息吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                delOrderList(this.addForm).then(() => {
                    this.getList()
                    this.addForm = {
                        name: '',
                        age: '',
                        sex: '',
                        birth: '',
                        addr: ''
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            })
                .catch(() => {
                    //     this.$message({
                    //         type: 'info',
                    //         message: '已取消删除'
                    //     });
                });
        },
        geyData() {
            this.total = this.tableData.length
        },
        // 编辑创建
        editCreate() {
            this.$refs.questionForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    if (this.modalType === 0) {
                        addOrderList(this.questionForm).then(() => {
                            this.getList()
                            console.log(this.questionForm);

                        })
                    } else {
                        console.log(this.questionForm);
                        editOrderList(this.questionForm).then(() => {
                            this.getList()
                        })
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }
                    this.dialogFormVisible = false
                }

            })
        },
        // 添加创建
        rightCreate() {
            // row.time = moment(row.time).format("yyyy-MM-DD")
            this.$refs.addForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    if (this.modalType === 0) {
                        addOrderList(this.addForm).then(() => {
                            this.getList()
                            console.log(this.addForm);

                        })
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    } else {
                        console.log(this.addForm);
                        editOrderList(this.addForm).then(() => {
                            this.getList()
                        })
                    }
                }
                this.dialogFormVisible = false
                this.addForm = {}
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(fileList) {
            console.log(fileList);
        },
        fileChange(uploadFile, fileList) {
            this.questionForm.file = uploadFile

            if (fileList.length !== 0) {
                this.$refs.exampleForm.validateField('file')
            }
        },
        fileRemove(uploadFile, fileList) {
            if (fileList.length === 0) {
                this.questionForm.file = null
                this.$refs.exampleForm.validateField('file')
            }
        },
        // 排队
        waitTeamOne() {

            this.$refs.addForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    this.$message({
                        message: '排队成功',
                        type: 'success'
                    });
                }
            })
        },
        // 排队
        waitTeam() {
            this.$message({
                message: '排队成功',
                type: 'success'
            });
        },
        // 排队
        waitTeamTwo() {

            this.$refs.questionForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    this.$message({
                        message: '排队成功',
                        type: 'success'
                    });
                }
            })
        },
        // 发货
        fa() {
            this.$message({
                message: '发货成功',
                type: 'success'
            });

        },
        // 发货
        faOne() {
            this.$refs.addForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    this.$message({
                        message: '发货成功',
                        type: 'success'
                    });
                }
            })
        },
        faTwo() {
            this.$refs.questionForm.validate(valid => {
                //表单验证失败
                if (!valid) {
                    //提示语
                    this.$message("请将表格填写完整");
                    return false;
                } else {
                    this.$message({
                        message: '发货成功',
                        type: 'success'
                    });
                }
            })
        },
        // 查询
        async getList() {
            // 分页参数
            const _query = {
                _page: this.currentPage,
                _limit: this.pageSize
            }
            //搜索参数
            if (!!this.keyword) {
                _query['name_like'] = this.keyword;
            }
            // console.log(this.keyword);
            const _res = await getOrderList(_query);
            // console.log(_res.data);
            this.tableData = _res.data;
            this.total = +_res.headers['x-total-count'];
        },
        // 重置
        async backList() {
            // 分页参数
            const _query = {
                _page: this.currentPage,
                _limit: this.pageSize
            }
            this.keyword = ''
            // console.log(this.keyword);
            const _res = await getOrderList(_query);
            console.log(_res.data);
            this.tableData = _res.data;
            this.total = +_res.headers['x-total-count'];
        },
        find() {
            this.getList()
        },

        reset() {
            this.backList()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.getList()

            // console.log(val);
        },
        handleCurrentChange() {
            this.getList()
        },

    },
    mounted() {

        this.getList()
    }
}



</script>

<style lang="less" scoped>
.contractView .el-form {
    text-align: left;
    margin-top: 20px;
    height: 100px;
}

.contractView .el-pagination {
    text-align: right;
}

.contract {
    display: flex;
    line-height: 30px;
    text-align: left;
    color: #1890FF;
}
</style>